<template>
    <div class="app-container">
        <el-row :gutter="20" style="height: 100%">
            <el-col :span="12" style="height: 100%">
                <div style="height: 100%">
                    <el-table
                        ref="chatHistoryTableRef"
                        v-loading="chatHistoryTableLoading"
                        :data="chatHistoryTableList"
                        height="85%"
                        border
                        stripe
                        highlight-current-row
                        @row-click="chatHistoryTableRowClick"
                        style="width: 100%;">
                        <el-table-column label="用户编号" align="center" prop="userId" show-overflow-tooltip min-width="120">
                        </el-table-column>
                        <el-table-column label="聊天角色" align="center" prop="agentId" show-overflow-tooltip min-width="100">
                        </el-table-column>
                        <el-table-column label="设备编号" align="center" prop="deviceId" show-overflow-tooltip min-width="100">
                        </el-table-column>
                        <el-table-column label="人脸id" align="center" prop="faceId" show-overflow-tooltip min-width="100">
                        </el-table-column>
                        <el-table-column label="信息汇总" align="center" prop="messageCount" show-overflow-tooltip width="80">
                        </el-table-column>
                        <el-table-column label="时间" align="center" prop="createDate" show-overflow-tooltip width="180">
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="140" class-name="small-padding fixed-width" fixed="right">
                            <template slot-scope="{row}">
                                <el-button type="primary" circle icon="el-icon-search" @click="(event) => get(row, event)" style="margin-left: 5px;"/>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        v-show="chatHistoryTableListTotal>0"
                        @size-change="chatHistoryPaginationSizeChange"
                        @current-change="chatHistoryPaginationCurrentChange"
                        :current-page="chatHistoryTableListParam.pageNum"
                        :page-sizes="[5,10,20,50]"
                        :page-size="chatHistoryTableListParam.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="chatHistoryTableListTotal"
                        style="padding: 6px 0;">
                    </el-pagination>
                </div>
            </el-col>

            <el-col :span="12" style="height: 100%">
                <div style="height: 100%">
                    <el-table
                        ref="chatMessageTableRef"
                        v-loading="chatMessageTableLoading"
                        :data="chatMessageTableList"
                        height="85%"
                        border
                        stripe
                        highlight-current-row
                        style="width: 100%;">
                        <el-table-column label="角色" align="center" show-overflow-tooltip width="80">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.role==='user'" type="success" effect="dark">用户</el-tag>
                                <el-tag v-if="scope.row.role==='assistant'" type="info" effect="dark">助手</el-tag>
                                <el-tag v-if="scope.row.role==='system'" type="warning" effect="dark">系统</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="对话内容" align="center" prop="content" show-overflow-tooltip min-width="100">
                        </el-table-column>
                        <el-table-column label="时间" align="center" prop="createDate" show-overflow-tooltip width="180">
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        v-show="chatMessageTableListTotal>0"
                        @size-change="chatMessagePaginationSizeChange"
                        @current-change="chatMessagePaginationCurrentChange"
                        :current-page="chatMessageTableListParam.pageNum"
                        :page-sizes="[5,10,20,50]"
                        :page-size="chatMessageTableListParam.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="chatMessageTableListTotal"
                        style="padding: 6px 0;">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" append-to-body :close-on-click-modal="false" width="880px" >
            <json-viewer
                :value="dialogJsonData"
                :expand-depth=1
                copyable
                boxed
                sort
                expanded>
            </json-viewer>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" type="primary">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import * as AiChatHistory from "@/api/aiChatHistory";
import * as AiChatMessage from "@/api/aiChatMessage";
import * as AiChatHistoryMem from '@/api/aiChatHistoryMem'

import JsonViewer from 'vue-json-viewer'

export default {
    components: {
        JsonViewer
    },
    data() {
        return {
            chatHistoryFilterForm: {
                faceId: '',
            },
            chatHistoryTableLoading: true,
            chatHistoryTableList: [],
            chatHistoryTableListTotal: 0,
            chatHistoryTableListParam: {
                pageNum: 1,
                pageSize: this.Config.pageSize
            },

            chatMessageFilterForm: {
                chatHistoryId: '',
            },
            chatMessageTableLoading: false,
            chatMessageTableList: [],
            chatMessageTableMultipleSelectionList: [],
            chatMessageTableListTotal: 0,
            chatMessageTableListParam: {
                pageNum: 1,
                pageSize: this.Config.pageSize
            },

            dialogVisible: false, // 对话框是否可见,一开始是关闭的,点击之后才打开
            dialogTitle: '分析报告',
            dialogJsonData: {}
        };
    },
    created() {
        this.chatHistoryFilterForm.faceId = this.$route.query.faceId
        this.handleSearchChatHistory()
    },
    methods: {
        chatHistoryTableRowClick(row) {
            this.chatMessageFilterForm.chatHistoryId = row.id
            this.handleSearchChatMessage()
        },
        chatHistoryPaginationSizeChange(val) {
            this.chatHistoryTableListParam.pageSize = val
            this.handleSearchChatHistory()
        },
        chatHistoryPaginationCurrentChange(val) {
            this.chatHistoryTableListParam.pageNum = val;
            this.handleSearchChatHistory()
        },
        handleSearchChatHistory() {
            this.chatHistoryTableLoading = true
            AiChatHistory.searchPage({
                faceId: this.chatHistoryFilterForm.faceId,
                pageNum: this.chatHistoryTableListParam.pageNum,
                pageSize: this.chatHistoryTableListParam.pageSize,
            }).then(res => {
                this.chatHistoryTableList = res.records
                this.chatHistoryTableListTotal = res.total
                this.chatHistoryTableLoading = false
            }).catch(error => {
                this.chatHistoryTableLoading = false
            })
        },

        chatMessagePaginationSizeChange(val) {
            this.chatMessageTableListParam.pageSize = val
            this.handleSearchChatMessage()
        },
        chatMessagePaginationCurrentChange(val) {
            this.chatMessageTableListParam.pageNum = val;
            this.handleSearchChatMessage()
        },
        handleSearchChatMessage() {
            this.chatMessageTableLoading = true

            AiChatMessage.searchPage({
                chatHistoryId: this.chatMessageFilterForm.chatHistoryId,
                pageNum: this.chatMessageTableListParam.pageNum,
                pageSize: this.chatMessageTableListParam.pageSize,
            }).then(res => {
                this.chatMessageTableList = res.records
                this.chatMessageTableListTotal = res.total
                this.chatMessageTableLoading = false
            }).catch(error => {
                this.chatMessageTableLoading = false
            })
        },

        get(row, event){
            event.stopPropagation()

            AiChatHistoryMem.getByChatId({
                chatId: row.id,
            }).then(res => {
                this.dialogTitle = `分析报告: ${res.createDate}`
                this.dialogJsonData = JSON.parse(res.memResult)
                this.dialogVisible = true
            }).catch(error => {
                this.dialogTitle = `分析报告: 错误`
                this.dialogVisible = true
            })
        }
    },
};
</script>

<style scoped>
</style>
